<template>
    <div class="container">
        <van-nav-bar>
            <template #left>
                <div class="left-box">
                    <div class="logo">
                        <img class="auto-img" src="../assets/home_active.png" alt="" />
                    </div>
                    <div class="logo-text">Luckin Coffee</div>
                </div>
            </template>
            <template #right>
                <div class="home-text" @click="gotoPage('home')">首页</div>
            </template>
        </van-nav-bar>

        <div class="login-box">
            <div class="welcome-title">欢迎回来！</div>
            <div class="welcome-subtitle">Please login to your accounts</div>
        </div>

        <van-form @submit="userlogin">
            <van-cell-group inset>
                <van-field v-model="username" name="手机号" label="手机号" placeholder="手机号"
                    :rules="[{ required: true, message: '请填写手机号' }, { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确，请重新输入' }]" />
                <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码(6-16位)"
                    :rules="[{ required: true, message: '请填写密码' }, { pattern: /^[A-Za-z]\w{5,15}$/, message: '密码支持数字字母下划线组合，且必须以字母开头，6-16位' }]" />
            </van-cell-group>
            <div style="margin: 16px;" class="forgot">
                <div class="forgot-pwd" @click="gotoPage('forgot')">忘记密码？</div>
            </div>

            <div style="margin: 16px;">
                <van-button class="mybtn" round block type="primary" native-type="submit">
                    登录
                </van-button>
            </div>
        </van-form>

        <div style="margin: 16px; margin-top: 40px;">
            <van-button @click="showPopup" round block type="default" native-type="submit">
                注册
            </van-button>
        </div>
    </div>
    <!-- 注册 -->
    <van-popup v-model:show="show" position="bottom" closeable>
        <div class="register-box">
            <div class="register-title">
                注册
            </div>
            <van-form @submit="register">
                <van-field v-model="registerUserInfo.phone" name="手机号" label="手机号" placeholder="手机号" autocomplete="off"
                    :rules="[{ required: true, message: '手机号必填' }, { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确' }]" />
                <van-field v-model="registerUserInfo.password" :type="!isOpenRegister ? 'password' : 'text'" name="密码"
                    label="密码" placeholder="密码(6-16位)" :right-icon="!isOpenRegister ? 'closed-eye' : 'eye-o'"
                    autocomplete="off"
                    :rules="[{ required: true, message: '密码必填' }, { pattern: /^[A-Za-z]\w{5,15}$/, message: '密码支持数字字母下划线组合，且必须以字母开头，6-16位' }]"
                    @click-right-icon="toggleResgiterPasssword" />
                <van-field v-model="registerUserInfo.nickName" type="text" name="昵称" label="昵称" placeholder="昵称(1-10位)"
                    autocomplete="off"
                    :rules="[{ required: true, message: '昵称必填' }, { pattern: /^[A-Za-z\u4e00-\u9fa50-9]{1,10}$/, message: '昵称支持中英文数字组合，1-10位' }]" />

                <div class="login-btn" style="margin-top: 60px">
                    <van-button round block color="#0C34BA" native-type="submit">注册</van-button>
                </div>

            </van-form>
        </div>
    </van-popup>
</template>
  
  
<script setup lang="ts">
import { Toast } from 'vant';

import 'vant/es/toast/style';

import request from '@/utils/request'


import { useRouter } from "vue-router"

import { login } from '@/api/index'

let router: any = useRouter();

let show: any = ref<boolean>(false);

let password: any = ref<string>('');
let username: any = ref<string>('');
// const onSubmit = (values) => {
//     console.log('submit', values);
// };

let showPopup: () => void = (): void => {
    show.value = !show.value;

}

let registerUserInfo: any = ref<any>({
    phone: '',
    password: '',
    nickName: ''
})

let isOpenRegister: any = ref<boolean>(false);

// let isOpenLogin: any = ref<boolean>(false);


const gotoPage: (name: string) => void = (name: string): void => {
    router.push({ name });
}

//注册
let register: () => void = (): void => {
    request.post('/register', {

        ...registerUserInfo.value
    }).then((result: any): void => {

        Toast(result.data.msg);

        if (result.data.code === 100) {

            show.value = false;
            //清除用户注册信息
            for (let key in registerUserInfo.value) {
                registerUserInfo.value[key] = '';
            }
        }
    })
}


//切换注册密码可见状态
let toggleResgiterPasssword: () => void = (): void => {
    isOpenRegister.value = !isOpenRegister.value;
}

// //切换登录密码可见状态toggleLoginPasssword
// let toggleLoginPasssword: () => void = (): void => {
//     isOpenLogin.value = !isOpenLogin.value;
// }

//登录
let userlogin: () => void = (): void => {
    login({
        phone: username.value,
        password: password.value
    }).then((result: any): void => {


        Toast(result.data.msg);

        if (result.data.code === 200) {
            //讲token保存到localStorage
            localStorage.setItem('token', result.data.token);
            setTimeout(() => {
                router.push({ name: 'home' });
            }, 1000)

        }
    }).catch((err: any): void => {
        console.log(err);

    })
}

</script>
  
<style lang="less" scoped>
.register-title {
    font-size: 24px;
    margin-bottom: 20px;

}

.register-box {
    padding: 10px;

    .login-box {
        margin-top: 80px;
        padding: 10px;
    }
}


.container {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #fff;

    .left-box {
        display: flex;
        align-items: center;

        .logo {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            overflow: hidden;

            .auto-img {
                width: 100%;
                height: 100%;
            }
        }

        .logo-text {
            margin-left: 10px;
            font-weight: bold;
            font-size: 14px;
        }
    }

    .home-text {
        // width: 2.75rem;
        height: 2.875rem;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 700;
        color: #0c34ba;
        font-size: .875rem;
    }

    .login-box {
        width: 98vw;
        height: 95px;
        padding: 1vw;
        margin-top: 80px;
        margin-bottom: 30px;

        .welcome-title {
            font-size: 30px;
            color: rgb(54, 54, 54);
            padding-left: 10px;
        }

        .welcome-subtitle {
            font-size: 18px;
            margin-top: 20px;
            color: #999;
            padding-left: 10px;
        }
    }

    .forgot {
        .forgot-pwd {
            width: 100%;
            font-size: 14px;
            color: rgb(97, 97, 97);
            text-align: right;
        }
    }

    .mybtn {
        margin-top: 40px;
        background-color: #0c34ba;
        border: 1px solid #0c34ba;
    }
}
</style>
  